<template>
    <div>
        <img src="../security/assets/mybrand.png">
        <p class="my-title">中心管理系统</p>
        <form>
            <label v-if="error" id="label_error" > {{ error }}</label>
            <div class="form-item">
                <label>
                    <p class="my-user">账号</p>
                    <span class="error-tips" v-if="phone_error">{{ phone_error }} </span>
                    <br>
                    <input type="text" v-model="phone" name="phone"/>
                    
                </label>
            </div>
            <div class="form-item">
                <p class="my-user">密码</p>
                <label>
                    <span class="error-tips" v-if="password_error">{{ password_error }} </span>
                    <br>
                    <input type="password" v-model="password" name="password" value="请输入密码" />
                </label>
            </div>

            <div class="form-item login-button">
                <label>
                    <br>
                    <button @click.prevent.stop="submit( phone, password )" > 登录 </button>
                </label>
            </div>
        </form>
    </div>
</template>

<style>

img{
    margin-top: 40px;
}

.my-title{
    font-size: 46px;
    font-weight: 800;
    margin-top: 40px;
}

.my-user{
    float: left;
    margin-top: 30px;
    font-size: 24px;
    margin-left: -40px;
    font-weight: 600;
}

form{
    margin:auto; 
    width:400px;
    margin-top: 40px;
}

.form-item{
    margin-top: 20px;
    float: left;
    width: 360px;
}

.login-button button{
    border: none;
    width: 250px;
    height: 50px;
    background: #4b89dc;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.form-item input{
    height: 50px;
    width: 300px;
    border: 1px solid #4b89dc;
    border-radius: 40px;
    outline: none;
    text-align: center;
    font-size: 18px;
    color: #666;
}

.error-tips{ 
    color: red;
}

</style>




<script>
import axios from 'axios'
export default { 
    data() { 
        return { 
            phone: '',
            password: '',
            error: '',
            password_error: '',
            phone_error: '',
        }
    },
    methods: { 
        submit( phone, password ){
            axios.post( '/api/v1/login', { phone, password } ).then( ( resp ) => { 
                console.log( resp );
                window.location.href = resp.data.success;
            }).catch( ( error ) => { 
                console.log( error.response );
                this.error = error.response.data.error;
                this.phone_error  = error.response.data.phone_error;
                this.password_error = error.response.data.password_error;
            });
        }
    }
}
</script>